<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端测试</title>
</head>
<body>
    <h1>数据库ER图工具 - 前端测试</h1>
    <button onclick="testAPI()">测试API</button>
    <div id="result"></div>
    <div id="error"></div>

    <script>
        async function testAPI() {
            const resultDiv = document.getElementById('result');
            const errorDiv = document.getElementById('error');
            
            try {
                console.log('开始测试API...');
                errorDiv.innerHTML = '';
                resultDiv.innerHTML = '正在请求数据...';
                
                const response = await fetch('/analyze', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        db_type: 'SQLITE',
                        host: '',
                        port: '',
                        database: 'example_ecommerce.db',
                        username: '',
                        password: ''
                    })
                });
                
                console.log('响应状态:', response.status);
                
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态: ${response.status}`);
                }
                
                const data = await response.json();
                console.log('接收到的数据:', data);
                
                if (!data.success) {
                    throw new Error('API返回失败状态');
                }
                
                if (!data.tables || data.tables.length === 0) {
                    throw new Error('没有获取到表数据');
                }
                
                resultDiv.innerHTML = `
                    <h3>测试成功!</h3>
                    <p>表数量: ${data.tables.length}</p>
                    <p>关系数量: ${data.relationships.length}</p>
                    <h4>表列表:</h4>
                    <ul>
                        ${data.tables.map(table => `<li>${table.name} (${table.columns.length} 列)</li>`).join('')}
                    </ul>
                `;
                
            } catch (error) {
                console.error('测试失败:', error);
                errorDiv.innerHTML = `<p style="color: red;">错误: ${error.message}</p>`;
                resultDiv.innerHTML = '';
            }
        }
        
        // 页面加载时自动测试
        window.onload = function() {
            console.log('页面加载完成，准备测试...');
        };
    </script>
</body>
</html>